<style lang="less" scoped>
    .eval_wrap {

        .evaluation_list {
            .evaluation_label {
                padding: 0.07rem 0.32rem 0.68rem;
                display: flex;
                flex-wrap: wrap;
                background: #fff;
                span {
                    flex-direction: row;
                    display: inline-block;
                    padding: 0.16rem 0.2rem;
                    background: #fceae8;
                    border-radius: 6px;

                    color: #131514;
                    margin-right: 0.2rem;
                    margin-top: 0.22rem;
                }
            }
            .list_box {
                padding: 0 0.3rem;
                margin-top: 0.16rem;
                background: #fff;
                .list_num {
                    .list_title {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        .left {
                            width: 50%;
                            img {
                                width: 0.52rem;
                                height: 0.52rem;
                                border-radius: 50%;
                                float: left;
                                margin-top: 0.32rem;
                            }
                            span {
                                float: left;
                                margin-top: 0.46rem;
                                margin-left: 0.14rem;
                                font-size: 0.28rem;
                                color: #131614;
                            }
                        }
                        .right {
                            width: 50%;
                            span {
                                float: right;
                                margin-top: 0.47rem;
                                font-size: 0.26rem;
                                color: #989898;
                            }
                        }
                    }
                    .list_txt {
                        margin-top: 0.24rem;
                        font-size: 0.28rem;
                        color: #555555;
                        line-height: 0.39rem;
                    }
                }
                .list_image {
                    margin-top: 0.15rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    div {
                        width: 30%;
                        height: 2rem;
                        margin-left: 2%;
                    }
                    img {
                        width: 100%;
                        height: 2rem;
                    }
                }
                .list_model {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    color: #a4a4a4;
                    font-size: 0.25rem;
                    padding: 0.16rem 0 0.28rem;
                    .model_style {
                        margin-left: 0.3rem;
                    }
                }
            }
        }
    }
</style>
<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon">
            </div>
        </v-header>
        <div class="main_allScroll">
            <scroller :on-infinite="loadFlag ? infinite: getDone" :on-refresh="refresh" ref="myscroller">
                <div class="eval_wrap" ref="eval_wrap">
                    <div class="evaluation_list">
                        <!--<div class="evaluation_label">-->
                        <!--<span>手机不错(127)</span> -->
                        <!--<span>速度快(74)</span>-->
                        <!--<span>手感好(73)</span>   -->
                        <!--</div>-->
                        <!-- 评论遍历容器 -->

                        <div class="list_box" v-for="(eval,idx) in eval_list" :key="idx">
                            <div class="list_num">
                                <div class="list_title">
                                    <div class="left">
                                        <img v-lazy="{src:eval.headImgUrl }">
                                        <span>{{eval.nickname}}</span>
                                    </div>
                                    <div class="right">
                                        <span>{{eval.createTime}}</span>
                                    </div>
                                </div>
                                <p class="list_txt">{{eval.content}}</p>
                            </div>
                            <div class="list_image">
                                <div v-for="(img, index) in eval.imgList " :key="index"
                                     @click="show(index, idx)">
                                    <img class="previewer-demo-img" :src="img.src" width="100" :ref="'img'+ idx">
                                </div>
                            </div>
                            <div class="list_model">
                                <div class="model_color" v-for="v in Object.keys(eval.sku)">
                                    <span class="left">{{v}}:</span>
                                    <span class="right" style="margin-right: 0.2rem">{{eval.sku[v]}}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <load-more v-show="!loadFlag" :show-loading="false" tip='我是有底线的'
                               background-color="#fbf9fe"></load-more>
                    <div v-transfer-dom>
                        <previewer :list="previewerImgList" ref="previewer" :options="options"
                                   @on-index-change="logIndexChange"></previewer>
                    </div>
                </div>
            </scroller>
        </div>
    </div>
</template>
<script>
    import {TransferDom, GroupTitle} from "vux";
    import {Previewer} from "vux";
    import {XImg, LoadMore, Loading} from "vux";
    import {photoSwipe} from '../../plugin'
    import { mapState } from 'vuex'
    export default {
        directives: {
            TransferDom
        },
        components: {
            TransferDom,
            GroupTitle,
            Previewer,
            LoadMore,
            Loading
        },
        data() {
            return {
                //顶部菜单自定义宽度
                getBarWidth: function (index) {
                    return (index + 1) * 22 + "px";
                },
                list: [],
                options: {
                    getThumbBoundsFn(index) {
                        // find thumbnail element
                        let thumbnail = document.querySelectorAll(".previewer-demo-img")[
                            index
                            ];
                        // get window scroll Y
                        let pageYScroll =
                            window.pageYOffset || document.documentElement.scrollTop;
                        // optionally get horizontal scroll
                        // get position of element relative to viewport
                        let rect = thumbnail.getBoundingClientRect();
                        // w = width
                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                        // Good guide on how to get element coordinates:
                        // http://javascript.info/tutorial/coordinates
                    }
                },
                eval_list: [],
                pageNum: 1,
                loadFlag: false,
                loadInx: 0,
                previewerImgList: [],
                idx: 0
            };
        },
        activated() {
            this.eval_list = []
            this.loadFlag = false
            this.pageNum = 1
            this.previewerImgList = []
            this.idx = 0
            this._getEvalList()
        },
        methods: {
            logIndexChange(arg) {
                var img = this.$refs['img'+ this.idx + arg.currentIndex][0]
                console.log(this.imgLoad(img))
                if(!this.imgLoad(img)){
                    console.log('图片未加载完成')
                    return
                }
            },
            show(index, idx) {
                var img = this.$refs['img'+ idx]
                var items = []
                img.forEach((v,i)=>{
                    items.push(v.src)
                })
                if(this.comJS.isAndroid() ? this.interactive.versionName.versionName >= 23 : this.interactive.versionName.versionName >= "1.1.3"){
                    let str = ''
                    items.forEach((v,i) => {
                        str += v;
                        if(i != items.length - 1){
                            str += ','
                        }
                    })
                    console.log(str)
                    this.Interactive.productImageClick(str,index)
                }else{
                    photoSwipe(items[index], items)
                }
            },
            imgLoad(img) {
                var newImg = document.createElement('img')
                newImg.src = img.src
                // newImg.onload = function(){
                    img.w = newImg.width
                    img.h = newImg.height
                // }
                console.dir(newImg)
                /*let i = new Image();
                i.src = img.src;
                i.onload=function () {
                    console.log(i.width,i.height,'new ImageData')
                }*/
                return img
            },
            _getEvalList(done) { // 拉取评论列表
                let params = {
                    templateId: this.$route.query.templateId,
                    pageNum: this.pageNum,
                    pageSize: 10
                }
                this.$ajax.queryJudge(params)
                    .then(res => {
                        if (done) {
                            done()
                        }
                        let eval_list = res.body.content.judges.list
                        eval_list.forEach((value) => {
                            if(!value.headImgUrl || value.headImgUrl == null){
                                value.headImgUrl = 'https://files.shbs008.com/images/headImg/defaultHeadImg.png'
                            }
                            value.imgList = []
                            if (value.images) {
                                value.images.split(',').forEach((v) => {
                                    var a = {}
                                    a.msrc = v
                                    a.src = v
                                    value.imgList.push(a)
                                })
                            }

                        })
                        if (eval_list.length < 10) {
                            this.loadFlag = false
                        } else {
                            this.loadFlag = true
                            this.pageNum++
                        }
                        let _arr = this.eval_list
                        this.eval_list = _arr.concat(eval_list)
                    })
            },
            infinite(done) {
                this.loadFlag = false
                global.myLoad = true
                this._getEvalList(done)
            },
            getDone(done) {
                this.$refs.myscroller.finishInfinite(2)
            },
            refresh(done) {
                this.pageNum = 1
                this.eval_list = []
                this.loadFlag = false
                this._getEvalList(done)
            }
        },
        computed: mapState({interactive: state => state.interactive}),
    };
</script>
